// 弹窗公共结构 combox
export function getComBox(
  width: number,
  height: number,
  content: string,
  title?: string
) {
  return `
      <div class="konva-root-dialog-content" 
        style="width:${width + "px"};height:${height + "px"}">
        <div class="konva-root-dialog-header">
          <span class="title">${title || ""}</span>
          <span class="close" style="cursor:pointer">&times;</span>
        </div>
        <div class="konva-root-dialog-body konva-root-overflow">${content}</div>
        <div class="konva-root-dialog-footer">
            <span class="close">关闭</span>
            <span class="confirm">确认</span>
        </div>
      </div>
    `;
}

// 弹窗表格配置项
const tableTemp = `
 <div class="konva-root-dialog-table">
    <!-- 行列 -->
    <div class="header">
        <span>行:</span>
        <input type="number" value="3" id="konva-root-table-rows" />
        <span>列:</span>
        <input type="number" value="3" id="konva-root-table-cols" />
    </div>

    <!-- 表格 -->
    <table>
        <thead>
            <tr>
                <th><input value="标题1" /></th>
                <th><input value="标题2" /></th>
                <th><input value="标题3" /></th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td><input /></td>
            <td><input /></td>
            <td><input /></td>
        </tr>
        <tr>
            <td><input /></td>
            <td><input /></td>
            <td><input /></td>
        </tr>
        <tr>
            <td><input /></td>
            <td><input /></td>
            <td><input /></td>
        </tr>
        </tbody>
    </table>
</div>
`;

// 统计图
const echartTemp = `
<div class="konva-root-dialog-echart">
    <!-- 行列 -->
    <div class="header">
        <span>统计图类型:</span>
        <select id="type">
            <option selected value="line">折线图</option>
            <option value="bar">柱状图</option>
            <option value="pie">饼图</option>
            <option value="radar">雷达图</option>
        </select>
        <br/>
        <span>统计图标题:</span>
        <input id="title" />
        <br/>
        <span>类别:</span>
        <input type="number" value="3" id="category" />
        <span>系列:</span>
        <input type="number" value="1" id="series" />
    </div>
    <!-- 表格 -->
    <table>
        <thead>
            <tr>
                <th></th>
                <th><input data-check="false" value="系列1" /></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input data-check="false" value="类别1" /></td>
                <td><input value="3" /></td>
            </tr>
            <tr>
                <td><input data-check="false" value="类别2" /></td>
                <td><input value="5" /></td>
            </tr>
            <tr>
                <td><input data-check="false" value="类别3" /></td>
                <td><input value="1" /></td>
            </tr>
        </tbody>
    </table>
</div>
`;

// 公式
const latexTemp = `  
<div class="konva-root-dialog-latex">
    <div style="position: sticky; top:0px; background-color: #fff;">
        <div class="mathlive"></div>
        <div class="konva-root-dialog-latex-menu">
            <span class="active">常用</span>
            <span>数字</span>
            <span>函数</span>
            <span>希腊字母</span>
            <span>内置公式</span>
        </div>
    </div>
    <div class="konva-root-dialog-latex-items"></div>
</div>
`;

// 富文本
const richTextTemp = `
<div class="richtext-editor" style="height:100%">
    <div id="standalone-container">
        <div id="toolbar-container">
            <span class="ql-formats">
                <button class="ql-bold"></button>
                <button class="ql-italic"></button>
                <button class="ql-underline"></button>
                <button class="ql-strike"></button>
            </span>
            <span class="ql-formats">
                <select class="ql-color"></select>
                <select class="ql-background"></select>
            </span>
            <span class="ql-formats">
                <button class="ql-script" value="sub"></button>
                <button class="ql-script" value="super"></button>
            </span>
            <span class="ql-formats">
                <button class="ql-header" value="1"></button>
                <button class="ql-header" value="2"></button>
                <button class="ql-blockquote"></button>
                <button class="ql-code-block"></button>
            </span>
            <span class="ql-formats">
                <select class="ql-align"></select>
            </span>
        </div>
        <div id="editor"></div>
    </div>
</div>
`;

// 自定义配色弹窗主内容
const colorMatchTemp = `
<div class="color-match-container">
    <div class="menu">
        <span class="active">
        <i class="iconfont icon-uni-zidingyi"></i>自定义颜色
        </span>
        <span><i class="iconfont icon-uni-shibietupian"></i> 图片生成 </span>
        <span
        ><i class="iconfont icon-uni-zhuti_tiaosepan_o"></i> 选色生成
        </span>
    </div>
    <div class="content">
        <div class="content-box konva-root-overflow">
        
        </div>
        <div class="content-preview">
        <span>效果预览</span>
        <canvas id="color-match-preview"></canvas>
        </div>
    </div>
</div>
`;

// 自定义配色-自定义
const customColorTemp = `
<!-- 自定义颜色 -->
<div class="zdy">
    <div>
        <span>节点填充颜色</span>
        <input data-colorMatchInput="nodeFillColor" type="color" />
    </div>
    <div>
        <span>节点边框颜色</span>
        <input data-colorMatchInput="nodeStrokeColor" type="color" />
    </div>
    <div>
        <span>节点文本颜色</span>
        <input data-colorMatchInput="nodeTextColor" type="color" />
    </div>
    <div class="line"></div>
    <div>
        <span>幻灯片背景填充</span>
        <input data-colorMatchInput="slideFillColor" type="color" />
    </div>
    <div>
        <span>幻灯片边框颜色</span>
        <input data-colorMatchInput="slideStrokeColor" type="color" />
    </div>
    <div class="line"></div>
    <div>
        <span>形变节点颜色</span>
        <input data-colorMatchInput="transformerColor" type="color" />
    </div>
    <div class="line"></div>
    <div>
        <span>表头背景色</span>
        <input data-colorMatchInput="tableHeaderFillColor" type="color" />
    </div>
    <div>
        <span>表格斑马纹</span>
        <input data-colorMatchInput="tableStripeColor1" id="tableStripeColor1" type="color" style="margin-left: auto" />
        <input data-colorMatchInput="tableStripeColor2" id="tableStripeColor2" type="color" />
    </div>
    <div>
        <span>表格文字颜色</span>
        <input data-colorMatchInput="tableTextColor" type="color" />
    </div>
    <div class="line"></div>
    <div>
        <span>统计图标题颜色</span>
        <input data-colorMatchInput="seriesTitleColor" type="color" />
    </div>
    <div>
        <span>统计图系列色</span>
    </div>
    <div>
        <input data-colorMatchInput="seriesColor1" id="seriesColor1" type="color" />
        <input data-colorMatchInput="seriesColor2" id="seriesColor2" type="color" />
        <input data-colorMatchInput="seriesColor3" id="seriesColor3" type="color" />
        <input data-colorMatchInput="seriesColor4" id="seriesColor4" type="color" />
        <input data-colorMatchInput="seriesColor5" id="seriesColor5" type="color" />
    </div>
</div>
`;

// 自定义配色-图片生成（使用 colorthief 来识别图片颜色，返回 (rgb)[]）
const customColorImgTemp = `
<!-- 图片 -->
<div class="image">
    <div class="image-picker">
        <div class="image-picker-box">
            <!-- <img src="" alt=""> -->
            <div class="title">捕捉图片色彩，PPT焕然一新</div>
            <div class="tips">-- 请选择图片进行生成 --</div>
        </div>
    </div>
</div>
`;
// 自定义配色-选色生成(大致实现思路：根据用户输入的颜色值，提供了五种最常见的配色方法，包括互补色、相邻色、三色调、分裂互补色和四色调)
const customColorSelectTemp = `
<div class="select">
    <div class="color-tips">
        <div class="color-tips-title">一键选色，轻松配色</div>
        <div class="color-tips-info">请选择颜色进行生成</div>
    </div>
    <div class="line"></div>
    <div class="color-block"></div>
</div>
`;

// 幻灯片模板
const slideTemp = `
 <div class="slide-template">
    <!-- 目录 -->
    <div class="menu">
        <span class="active">封面页</span>
        <span>目录页</span>
        <span>章节页</span>
        <span>结束页</span>
        <span>正文页</span>
    </div>
    <!-- 内容展示 直接拿 image 展示即可（存储的是 layer id） -->
    <div class="content konva-root-overflow">
        <img data-temp="default" src="./public/slide-temp.png" alt="" />
    </div>
</div>
`;

export {
  tableTemp,
  latexTemp,
  slideTemp,
  echartTemp,
  richTextTemp,
  colorMatchTemp,
  customColorTemp,
  customColorImgTemp,
  customColorSelectTemp,
};
